import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
import { adminCompanyType, adminPriceType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import {
  apiProductGetList,
  apiPurchaseGetList,
} from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);
  const { loading: getListLoading, run } = useRequest(apiPurchaseGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
      md: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useUpdateEffect(() => {
    run({
      productName: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useEffect(() => {
    run({
      pageNo: 1,
      pageSize: 10,
    });
    getForm(form);
  }, []);

  useUpdateEffect(() => {
    if (visible === true) {
      run({
        pageNo: 1,
        pageSize: 10,
      });
    }
  }, [visible]);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (allValues.type === 2 && changedValues.poNo) {
      const result: any = data.filter(
        (n: any) => n.poNo === changedValues.poNo,
      );
      form.setFieldsValue({
        parentId: result[0].id,
      });
    }
  };
  return (
    <Modal
      width={1024}
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        initialValues={{ type: 1, parentId: 0 }}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <Row>
          <Col span={12} style={{ display: 'none' }}>
            <FormItem name="parentId">
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'采购单类型'} name="type">
              <Select>
                <Select.Option key={1} value={1}>
                  采购单
                </Select.Option>
                <Select.Option key={2} value={2}>
                  子采购单
                </Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              shouldUpdate={(prevValues, curValues) => {
                return curValues.type !== undefined;
              }}
              style={{ margin: 0 }}
            >
              {({ getFieldValue }) => {
                if (getFieldValue('type') === 1) {
                  return null;
                } else {
                  return (
                    <FormItem
                      {...formItemLayout}
                      label={'采购单号'}
                      rules={[{ required: true, message: '请选择采购单号' }]}
                      name="poNo"
                    >
                      <Select
                        showSearch
                        onSearch={value => {
                          setSearchValue(value);
                        }}
                        filterOption={false}
                        placeholder="选择父采购单"
                      >
                        {data &&
                          data.map((item: any) => (
                            <Select.Option key={item.id} value={item.poNo}>
                              {item.poNo}
                            </Select.Option>
                          ))}
                      </Select>
                    </FormItem>
                  );
                }
              }}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入供应商' }]}
              {...formItemLayout}
              label={'供应商'}
              name="supplier"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择分类' }]}
              {...formItemLayout}
              label={'分类'}
              name="materialType"
            >
              <Select>
                <Select.Option value={'原料'}>原料</Select.Option>
                <Select.Option value={'边料'}>边料</Select.Option>
                <Select.Option value={'化工'}>化工</Select.Option>
                <Select.Option value={'配件'}>配件</Select.Option>
              </Select>
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入品名' }]}
              {...formItemLayout}
              label={'品名'}
              name="productName"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入型号' }]}
              {...formItemLayout}
              label={'型号'}
              name="model"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'付款公司'}
              name="paymentCompany"
              rules={[{ required: true, message: '请选择付款公司' }]}
            >
              <Select>
                {adminCompanyType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'是否一次性付清'}
              name="multiplePayment"
              rules={[{ required: true, message: '请想着是否一次性付清' }]}
            >
              <Select>
                <Select.Option value={1}>是</Select.Option>
                <Select.Option value={2}>否</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入重量' }]}
              {...formItemLayout}
              label={'重量'}
              name="weight"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择付款方式' }]}
              {...formItemLayout}
              label={'付款方式'}
              name="paymentType"
            >
              <Select>
                <Select.Option value={'汇票'}>汇票</Select.Option>
                <Select.Option value={'银行汇款'}>银行汇款</Select.Option>
                <Select.Option value={'现金'}>现金</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'单价'} style={{ margin: 0 }}>
              <Input.Group compact>
                <FormItem
                  rules={[{ required: true, message: '请选择单价' }]}
                  style={{ width: '40%' }}
                  name="priceType"
                >
                  <Select style={{ width: '100%' }}>
                    {adminPriceType.map(item => (
                      <Select.Option key={item.value} value={item.value}>
                        {item.label}
                      </Select.Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem
                  rules={[{ required: true, message: '请输入价格' }]}
                  style={{ width: '60%' }}
                  name={'price'}
                >
                  <Input placeholder={'价格'} />
                </FormItem>
              </Input.Group>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择付款日期' }]}
              {...formItemLayout}
              label={'付款日期'}
              name="paymentTime"
            >
              <DatePicker style={{ width: '100%' }} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'付款金额'}
              name="paymentAmount"
              rules={[{ required: true, message: '请输入付款金额' }]}
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'是否到票'}
              rules={[{ required: true, message: '请选择是否到票' }]}
              name="receivedInvoice"
            >
              <Select>
                <Select.Option value={1}>是</Select.Option>
                <Select.Option value={2}>否</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'发票金额'}
              rules={[{ required: true, message: '请输入发票金额' }]}
              name="invoiceAmount"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入采购人员' }]}
              {...formItemLayout}
              label={'采购人员'}
              name="purchaser"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem {...formItemLayout} label={'备注'} name="remark">
              <Input.TextArea rows={3} />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
